<template>
	<div>
    <zh-form ref="excelModelFormRef"  :model="state.form"  :rules="state.rules">
      <zh-form-input
				prop="modelCode"
        :disabled="state.codeDisabled||props.showFlag"
				label="模版编号"
				placeholder="请输入模版编号"
				v-model="state.form.modelCode"
			></zh-form-input>
      <zh-form-input
				prop="modelName"
				label="模版名称"
        :disabled="props.showFlag"
				placeholder="请输入模版名称"
				v-model="state.form.modelName"
			></zh-form-input>
      <zh-form-cascader
        prop="excelClassCode"
        label="模版分类"
        placeholder="请选择"
        :disabled="props.showFlag"
        :props="{checkStrictly: true,emitPath:false}"
        v-model="state.form.excelClassCode"
        :options="state.classSelectTreeData"
      ></zh-form-cascader>
      <zh-form-input
				prop="excelVersion"
				label="版本"
        :disabled="props.showFlag"
				placeholder="请输入模版版本"
				v-model="state.form.excelVersion"
			></zh-form-input>
      <zh-form-select prop="newFlag"  :disabled="props.showFlag" label="是否当前使用" :options="state.flagDictData" placeholder="请选择" v-model="state.form.newFlag"></zh-form-select>
      <zh-form-select prop="excelType" :disabled="props.showFlag||state.excelTypeDisabled" label="文件类型" :options="state.excelTypeDictData" placeholder="请选择" v-model="state.form.excelType"></zh-form-select>
      <zh-form-select prop="excelMode" :disabled="props.showFlag" label="读取模式" :options="state.excelModeDictData" placeholder="请选择" v-model="state.form.excelMode"></zh-form-select>
      <zh-form-input
				prop="readClass"
				label="读功能编号"
        :disabled="props.showFlag"
				placeholder="请输入读取数据时处理功能编号"
				v-model="state.form.readClass"
			></zh-form-input>
      <zh-form-input
				prop="writeClass"
				label="写功能编号"
        :disabled="props.showFlag"
				placeholder="请输入写入数据时处理功能编号"
				v-model="state.form.writeClass"
			></zh-form-input>
      <zh-form-select prop="bigFlag" :disabled="props.showFlag" label="是否大数据" @change="bigChange" :options="state.flagDictData" placeholder="请选择" v-model="state.form.bigFlag"></zh-form-select>
      <zh-form-input
				prop="sheetName"
        :disabled="props.showFlag"
				label="sheet名称"
				placeholder="请输入sheet名称"
				v-model="state.form.sheetName"
			></zh-form-input>
      <zh-form-number
				prop="sheetIndex"
        :disabled="props.showFlag"
				label="sheet序号"
				placeholder="请输入sheet序号"
				v-model="state.form.sheetIndex"
			></zh-form-number>
      <zh-form-color-picker prop="headerColorStr" :disabled="props.showFlag" label="标题字体颜色"  placeholder="请选择" v-model="state.form.headerColorStr"></zh-form-color-picker>
      <zh-form-color-picker prop="headerBgColorStr" :disabled="props.showFlag" label="标题背景颜色"  placeholder="请选择" v-model="state.form.headerBgColorStr"></zh-form-color-picker>
      <zh-form-color-picker prop="bodyColorStr" :disabled="props.showFlag" label="数据字体颜色"  placeholder="请选择" v-model="state.form.bodyColorStr"></zh-form-color-picker>
      <zh-form-color-picker prop="bodyBgColorStr" :disabled="props.showFlag" label="数据背景颜色"  placeholder="请选择" v-model="state.form.bodyBgColorStr"></zh-form-color-picker>
      <zh-form-color-picker prop="borderColorStr" :disabled="props.showFlag" label="边框颜色"  placeholder="请选择" v-model="state.form.borderColorStr"></zh-form-color-picker>
      <zh-form-number
				prop="borderSize"
				label="边框粗细"
        :disabled="props.showFlag"
				placeholder="边框粗细 0-13"
				v-model="state.form.borderSize"
			></zh-form-number>
      <zh-form-number
				prop="headerHeight"
				label="标题行高"
        :disabled="props.showFlag"
				placeholder="请输入标题行高"
				v-model="state.form.headerHeight"
			></zh-form-number>
      <zh-form-number
				prop="bodyHeight"
				label="数据行高"
        :disabled="props.showFlag"
				placeholder="请输入数据行高"
				v-model="state.form.bodyHeight"
			></zh-form-number>
      <zh-form-number
				prop="rowsplit"
				label="冻结行"
        :disabled="props.showFlag"
				placeholder="冻结行，从第一行开始"
				v-model="state.form.rowsplit"
			></zh-form-number>
      <zh-form-number
				prop="colsplit"
				label="冻结列"
        :disabled="props.showFlag"
				placeholder="冻结列，从第一列开始"
				v-model="state.form.colsplit"
			></zh-form-number>
      <zh-form-number
				prop="headerRowIndex"
				label="标题起始行"
        :disabled="props.showFlag"
				placeholder="标题行 从0开始"
				v-model="state.form.headerRowIndex"
			></zh-form-number>
      <zh-form-number
				prop="startRowIndex"
				label="数据起始行"
        :disabled="props.showFlag"
				placeholder="数据起始行 从0开始 为空则是标题行+1"
				v-model="state.form.startRowIndex"
			></zh-form-number>
      <zh-form-select prop="wrapText" :disabled="props.showFlag" label="是否换行" :options="state.flagDictData" placeholder="请选择" v-model="state.form.wrapText"></zh-form-select>
      <zh-form-number
				prop="fontSize"
				label="字体大小"
        :disabled="props.showFlag"
				placeholder="请输入字体大小"
				v-model="state.form.fontSize"
			></zh-form-number>
      <zh-form-input
				prop="fontName"
				label="字体"
        :disabled="props.showFlag"
				placeholder="请输入字体"
				v-model="state.form.fontName"
			></zh-form-input>
      
      <zh-form-choose-org prop="orgId" :disabled="props.showFlag" label="所属组织" v-model="state.form.orgId"></zh-form-choose-org>
      <zh-form-cascader
        prop="areaCode"
        label="行政区划"
        :disabled="props.showFlag"
        placeholder="请选择"
        :props="{checkStrictly: true,emitPath:false}"
        v-model="state.form.areaCode"
        :options="state.areaCodeSelectTreeData"
      ></zh-form-cascader>
      <zh-form-select
        prop="appId"
        :lazy="true"
        label="所属应用"
        :disabled="props.showFlag"
        v-model="state.form.appId"
        :fieldNames="{ label: 'appName', value: 'appId' }"
        funcCode="application0012"
        searchField="appName"
      ></zh-form-select>   
      <zh-form-input :span="24" :disabled="props.showFlag" :rows="4" prop="remarks" type="textarea" label="备注" v-model="state.form.remarks"></zh-form-input> 
    </zh-form>
  </div>
</template>
<script lang="ts" setup name="ExcelModelForm">
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
  showFlag:{
    type:Boolean,
    default:false
  },
  modelValue: Boolean,
});
//------------------定义子组件---------------------------
const excelModelFormRef=ref()
const emit = defineEmits(['update:modelValue']);
//------------------内部变量定义-------------------------
const state=reactive({
  form:{newFlag:'0'} as any,
  rules:{
    modelCode: [
      {
        required: true,
        message: '请输入模型编号',
        trigger: 'blur',
      },
    ],
    modelName: [
      {
        required: true,
        message: '请输入模型名称',
        trigger: 'blur',
      },
    ],
    excelClassCode: [
      {
        required: true,
        message: '请选择模型分类',
        trigger: 'blur',
      },
    ],
    excelVersion: [
      {
        required: true,
        message: '请输入模型版本',
        trigger: 'blur',
      },
    ],
    excelType: [
      {
        required: true,
        message: '请选择文件类型',
        trigger: 'blur',
      },
    ],
    excelMode: [
      {
        required: true,
        message: '请选择读取模式',
        trigger: 'blur',
      },
    ],
  },
  excelTypeDictData:[{dictKey:'xls',dictValue:'xls'},{dictKey:'xlsx',dictValue:'xlsx'}],
  flagDictData:[{dictKey:'1',dictValue:'是'},{dictKey:'0',dictValue:'否'}],
  excelModeDictData:[{dictKey:'1',dictValue:'按列顺序读取'},{dictKey:'2',dictValue:'按表头名称读取'}],
  areaCodeSelectTreeData:[],
  classSelectTreeData:[],
  codeDisabled:false,
  excelTypeDisabled:false,
})
//------------------定义调用方法-------------------------
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}
function getClassTree() {
	setTimeout(() => {
		$api.common.send.post('excelClass0007', {}).then((res) => {
			state.classSelectTreeData = res.result;
		});
	}, 20);
}
function bigChange(val){
  if(val==='1'){
    state.form.excelType='xlsx'
    state.excelTypeDisabled=true;
  }else{
    state.excelTypeDisabled=false;
  }
}
function getDetail(){
  if(!props.modelInfo||!props.modelInfo.id){
    return;
  }
  let params={id:props.modelInfo.id};
  $api.common.send.post('excelModel0002', params).then((res) => {
    state.codeDisabled=true
		state.form = Object.assign({},res.result);
	});
}
async function save(){
  //校验表单
	let checkFlag = await excelModelFormRef.value.checkForm();
	if (checkFlag) {
    const info = state.form;
    let ret=null;
		if (!props.showFlag&&info.id) {
      ret=await $api.common.send.post('excelModel0005',info);
      ret.saveType = 'edit';
      if(ret.code === 0){
        ElMessage.success('修改成功！');
        emit('update:modelValue', false);
      }
    } else {
      ret=await $api.common.send.post('excelModel0004',info);	
      ret.saveType = 'add';
      if(ret.code === 0){
        ElMessage.success('新建成功！');
        emit('update:modelValue', false);
      }
		}
    return ret;
  }
	return null;
}
//------------------初始化------------------------------
onMounted(()=>{
  getAreaCodeData();
  getClassTree();
  getDetail();
})

//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ form: state.form ,save});
</script>
<style lang="scss" scoped></style>
